<template name="skeleton">
  <view class="sk-container">
    <view class="viewport viewport data-v-46d067ee data-v-46d067ee">
      <view class="navbar navbar data-v-46d067ee data-v-46d067ee" style="padding-top: 44px">
        <view class="wrap wrap data-v-46d067ee data-v-46d067ee">
          <navigator
            class="back icon-left data-v-46d067ee sk-pseudo sk-pseudo-circle"
            open-type="navigateBack"
          ></navigator>
          <view class="title data-v-46d067ee sk-transparent sk-text-23-3333-219 sk-text"
            >订单详情</view
          >
        </view>
      </view>
      <scroll-view
        :scroll-y="true"
        class="main main data-v-46d067ee data-v-46d067ee"
        :enable-back-to-top="true"
      >
        <view class="order-status order-status data-v-46d067ee data-v-46d067ee">
          <view class="wait data-v-46d067ee sk-image" style="padding-top: 64px">
            <view
              class="status icon-clock margin data-v-46d067ee sk-transparent sk-text-14-2857-446 sk-text sk-pseudo sk-pseudo-circle"
              >待付款</view
            >
            <view class="price price margin margin data-v-46d067ee data-v-46d067ee">
              <text class="pay data-v-46d067ee sk-transparent"
                >应付金额：
                <text
                  class="symbol data-v-46d067ee sk-transparent sk-text-14-2857-616 sk-text sk-pseudo sk-pseudo-circle"
                  >896</text
                ></text
              >
              <view class="time time data-v-46d067ee data-v-46d067ee">
                <text class="data-v-46d067ee sk-transparent sk-text-14-2857-343 sk-text"
                  >支付剩余</text
                >
                <view
                  is="node-modules/@dcloudio/uni-ui/lib/uni-countdown/uni-countdown"
                  class="data-v-46d067ee data-v-46d067ee"
                >
                  <view
                    class="uni-countdown countdown--uni-countdown data-v-342c352a countdown--data-v-342c352a"
                  >
                    <text
                      class="uni-countdown__number countdown--uni-countdown__number data-v-342c352a countdown--data-v-342c352a sk-transparent sk-text-15-0000-128 sk-text"
                      style="
                        color: rgb(255, 255, 255);
                        font-size: 14px;
                        width: 22px;
                        line-height: 20px;
                        border-radius: 3px;
                        background-position-x: 50%;
                      "
                      >00</text
                    >
                    <text
                      class="uni-countdown__splitor countdown--uni-countdown__splitor data-v-342c352a countdown--data-v-342c352a sk-transparent sk-opacity"
                      style="color: #fff; font-size: 12px"
                      >时</text
                    >
                    <text
                      class="uni-countdown__number countdown--uni-countdown__number data-v-342c352a countdown--data-v-342c352a sk-transparent sk-text-15-0000-697 sk-text"
                      style="
                        color: rgb(255, 255, 255);
                        font-size: 14px;
                        width: 22px;
                        line-height: 20px;
                        border-radius: 3px;
                        background-position-x: 50%;
                      "
                      >29</text
                    >
                    <text
                      class="uni-countdown__splitor countdown--uni-countdown__splitor data-v-342c352a countdown--data-v-342c352a sk-transparent sk-opacity"
                      style="color: #fff; font-size: 12px"
                      >分</text
                    >
                    <text
                      class="uni-countdown__number countdown--uni-countdown__number data-v-342c352a countdown--data-v-342c352a sk-transparent sk-text-15-0000-556 sk-text"
                      style="
                        color: rgb(255, 255, 255);
                        font-size: 14px;
                        width: 22px;
                        line-height: 20px;
                        border-radius: 3px;
                        background-position-x: 50%;
                      "
                      >42</text
                    >
                    <text
                      class="uni-countdown__splitor countdown--uni-countdown__splitor data-v-342c352a countdown--data-v-342c352a sk-transparent sk-opacity"
                      style="color: #fff; font-size: 12px"
                      >秒</text
                    >
                  </view>
                </view>
              </view>
            </view>
            <view class="pay-btn pay-btn margin margin data-v-46d067ee data-v-46d067ee">
              <button
                class="btn data-v-46d067ee sk-transparent sk-button sk-pseudo sk-pseudo-circle"
              >
                去支付
              </button>
            </view>
          </view>
        </view>
        <view class="content content data-v-46d067ee data-v-46d067ee">
          <view class="address-box data-v-46d067ee sk-image">
            <view class="user-box user-box data-v-46d067ee data-v-46d067ee">
              <view class="user data-v-46d067ee sk-transparent sk-text-14-2857-579 sk-text"
                >小朱同学</view
              >
              <view class="contact data-v-46d067ee sk-transparent sk-text-14-2857-711 sk-text"
                >13536940617</view
              >
            </view>
            <view class="address data-v-46d067ee sk-transparent sk-text-14-2857-606 sk-text"
              >北京市 北京市 东城区113</view
            >
          </view>
          <view class="goods-wrap goods-wrap data-v-46d067ee data-v-46d067ee">
            <view class="goods-box goods-box data-v-46d067ee data-v-46d067ee">
              <navigator class="data-v-46d067ee data-v-46d067ee" hover-class="none">
                <view class="good good data-v-46d067ee data-v-46d067ee">
                  <view class="image image data-v-46d067ee data-v-46d067ee">
                    <image class="pic data-v-46d067ee sk-image" mode="aspectFill"></image>
                  </view>
                  <view class="meta meta data-v-46d067ee data-v-46d067ee">
                    <view class="name data-v-46d067ee sk-transparent sk-text-0-0000-616 sk-text"
                      >多米尼加陈年朗姆酒700毫升</view
                    >
                    <text class="attrs data-v-46d067ee sk-transparent sk-text-14-2857-501 sk-text"
                      >多米尼加陈年朗姆酒40度700mL</text
                    >
                    <view class="price-count price-count data-v-46d067ee data-v-46d067ee">
                      <view class="price price data-v-46d067ee data-v-46d067ee">
                        <view
                          class="price-pay symbol data-v-46d067ee sk-transparent sk-text-14-2857-214 sk-text sk-pseudo sk-pseudo-circle"
                          >238.00</view
                        >
                        <view
                          class="price-old symbol data-v-46d067ee sk-transparent sk-text-14-2857-812 sk-text sk-pseudo sk-pseudo-circle"
                          style="text-decoration-color: transparent"
                          >238.00</view
                        >
                      </view>
                      <view
                        class="count data-v-46d067ee sk-transparent sk-text-14-2857-928 sk-text"
                      >
                        x1</view
                      >
                    </view>
                  </view>
                </view>
              </navigator>
              <navigator class="data-v-46d067ee data-v-46d067ee" hover-class="none">
                <view class="good good data-v-46d067ee data-v-46d067ee">
                  <view class="image image data-v-46d067ee data-v-46d067ee">
                    <image class="pic data-v-46d067ee sk-image" mode="aspectFill"></image>
                  </view>
                  <view class="meta meta data-v-46d067ee data-v-46d067ee">
                    <view class="name data-v-46d067ee sk-transparent sk-text-0-0000-353 sk-text"
                      >梅乃宿梅酒720毫升</view
                    >
                    <text class="attrs data-v-46d067ee sk-transparent sk-text-14-2857-476 sk-text"
                      >日本梅乃宿梅酒12度1.8升</text
                    >
                    <view class="price-count price-count data-v-46d067ee data-v-46d067ee">
                      <view class="price price data-v-46d067ee data-v-46d067ee">
                        <view
                          class="price-pay symbol data-v-46d067ee sk-transparent sk-text-14-2857-82 sk-text sk-pseudo sk-pseudo-circle"
                          >1312.00</view
                        >
                        <view
                          class="price-old symbol data-v-46d067ee sk-transparent sk-text-14-2857-421 sk-text sk-pseudo sk-pseudo-circle"
                          style="text-decoration-color: transparent"
                          >656.00</view
                        >
                      </view>
                      <view
                        class="count data-v-46d067ee sk-transparent sk-text-14-2857-830 sk-text"
                      >
                        x2</view
                      >
                    </view>
                  </view>
                </view>
              </navigator>
            </view>
            <view class="info info data-v-46d067ee data-v-46d067ee">
              <view class="item item data-v-46d067ee data-v-46d067ee">
                <text class="label data-v-46d067ee sk-transparent sk-text-20-8333-653 sk-text"
                  >商品总价:</text
                >
                <text
                  class="value data-v-46d067ee sk-transparent sk-text-20-8333-401 sk-text"
                  style="background-position-x: 100%"
                  >894</text
                >
              </view>
              <view class="item item data-v-46d067ee data-v-46d067ee">
                <text class="label data-v-46d067ee sk-transparent sk-text-20-8333-302 sk-text"
                  >运费:</text
                >
                <text class="value data-v-46d067ee sk-transparent sk-opacity">2</text>
              </view>
              <view class="item item data-v-46d067ee data-v-46d067ee">
                <text class="label data-v-46d067ee sk-transparent sk-text-20-8333-493 sk-text"
                  >应付金额:</text
                >
                <text
                  class="value should-pay data-v-46d067ee sk-transparent sk-text-12-5000-802 sk-text sk-pseudo sk-pseudo-circle"
                  style="background-position-x: 100%"
                  >896</text
                >
              </view>
            </view>
          </view>
          <view class="order-related order-related data-v-46d067ee data-v-46d067ee">
            <view class="title data-v-46d067ee sk-transparent sk-text-26-6667-202 sk-text"
              >订单信息</view
            >
            <view class="item item data-v-46d067ee data-v-46d067ee">
              <view class="label data-v-46d067ee sk-transparent sk-text-20-0000-93 sk-text"
                >订单编号:1770422315574628354</view
              >
              <view class="copy data-v-46d067ee sk-transparent sk-text-25-0000-5 sk-text"
                >复制</view
              >
            </view>
            <view class="item data-v-46d067ee sk-transparent sk-text-20-0000-73 sk-text"
              >下单时间:2024-03-20 20:09:08</view
            >
          </view>
        </view>
        <view is="components/XtxGuess" class="r r data-v-46d067ee data-v-46d067ee">
          <view class="guess-panel XtxGuess--guess-panel data-v-e94a02da XtxGuess--data-v-e94a02da">
            <view
              class="title XtxGuess--title data-v-e94a02da XtxGuess--data-v-e94a02da sk-transparent sk-text-20-0000-533 sk-text sk-pseudo sk-pseudo-circle"
              >猜你喜欢</view
            >
            <view class="content XtxGuess--content data-v-e94a02da XtxGuess--data-v-e94a02da">
              <navigator class="item XtxGuess--item data-v-e94a02da XtxGuess--data-v-e94a02da">
                <image
                  class="image XtxGuess--image data-v-e94a02da XtxGuess--data-v-e94a02da sk-image"
                  mode="aspectFill"
                ></image>
              </navigator>
              <navigator class="item XtxGuess--item data-v-e94a02da XtxGuess--data-v-e94a02da">
                <image
                  class="image XtxGuess--image data-v-e94a02da XtxGuess--data-v-e94a02da sk-image"
                  mode="aspectFill"
                ></image>
              </navigator>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="toolbar toolbar data-v-46d067ee data-v-46d067ee" style="padding-bottom: 34px">
        <view
          class="btn cancel-btn data-v-46d067ee sk-transparent sk-text-28-3333-39 sk-text"
          style="background-position-x: 50%"
          >取消订单</view
        >
        <view
          class="btn pay-btn data-v-46d067ee sk-transparent sk-text-28-3333-166 sk-text"
          style="background-position-x: 50%"
          >去支付</view
        >
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import '../styles/orderDetail', '../styles/cancelReasonPanel';
.sk-transparent {
  color: transparent !important;
}
.sk-text-23-3333-219 {
  background-image: linear-gradient(
    transparent 23.3333%,
    #eeeeee 0%,
    #eeeeee 76.6667%,
    transparent 0%
  ) !important;
  background-size: 100% 60rpx;
  position: relative !important;
}
.sk-text {
  background-origin: content-box !important;
  background-clip: content-box !important;
  background-color: transparent !important;
  color: transparent !important;
  background-repeat: repeat-y !important;
}
.sk-text-14-2857-446 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 44.8rpx;
  position: relative !important;
}
.sk-text-14-2857-616 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 39.2rpx;
  position: relative !important;
}
.sk-text-14-2857-343 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 39.2rpx;
  position: relative !important;
}
.sk-text-15-0000-128 {
  background-image: linear-gradient(
    transparent 15%,
    #eeeeee 0%,
    #eeeeee 85%,
    transparent 0%
  ) !important;
  background-size: 100% 40rpx;
  position: relative !important;
}
.sk-opacity {
  opacity: 0 !important;
}
.sk-text-15-0000-697 {
  background-image: linear-gradient(
    transparent 15%,
    #eeeeee 0%,
    #eeeeee 85%,
    transparent 0%
  ) !important;
  background-size: 100% 40rpx;
  position: relative !important;
}
.sk-text-15-0000-556 {
  background-image: linear-gradient(
    transparent 15%,
    #eeeeee 0%,
    #eeeeee 85%,
    transparent 0%
  ) !important;
  background-size: 100% 40rpx;
  position: relative !important;
}
.sk-text-14-2857-579 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 36.4rpx;
  position: relative !important;
}
.sk-text-14-2857-711 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 36.4rpx;
  position: relative !important;
}
.sk-text-14-2857-606 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 36.4rpx;
  position: relative !important;
}
.sk-text-0-0000-616 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 28rpx;
  position: relative !important;
}
.sk-text-14-2857-501 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 33.6rpx;
  position: relative !important;
}
.sk-text-14-2857-214 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 39.2rpx;
  position: relative !important;
}
.sk-text-14-2857-812 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 33.6rpx;
  position: relative !important;
}
.sk-text-14-2857-928 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 39.2rpx;
  position: relative !important;
}
.sk-text-0-0000-353 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 28rpx;
  position: relative !important;
}
.sk-text-14-2857-476 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 33.6rpx;
  position: relative !important;
}
.sk-text-14-2857-82 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 39.2rpx;
  position: relative !important;
}
.sk-text-14-2857-421 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 33.6rpx;
  position: relative !important;
}
.sk-text-14-2857-830 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 39.2rpx;
  position: relative !important;
}
.sk-text-20-8333-653 {
  background-image: linear-gradient(
    transparent 20.8333%,
    #eeeeee 0%,
    #eeeeee 79.1667%,
    transparent 0%
  ) !important;
  background-size: 100% 48rpx;
  position: relative !important;
}
.sk-text-20-8333-401 {
  background-image: linear-gradient(
    transparent 20.8333%,
    #eeeeee 0%,
    #eeeeee 79.1667%,
    transparent 0%
  ) !important;
  background-size: 100% 48rpx;
  position: relative !important;
}
.sk-text-20-8333-302 {
  background-image: linear-gradient(
    transparent 20.8333%,
    #eeeeee 0%,
    #eeeeee 79.1667%,
    transparent 0%
  ) !important;
  background-size: 100% 48rpx;
  position: relative !important;
}
.sk-text-20-8333-493 {
  background-image: linear-gradient(
    transparent 20.8333%,
    #eeeeee 0%,
    #eeeeee 79.1667%,
    transparent 0%
  ) !important;
  background-size: 100% 48rpx;
  position: relative !important;
}
.sk-text-12-5000-802 {
  background-image: linear-gradient(
    transparent 12.5%,
    #eeeeee 0%,
    #eeeeee 87.5%,
    transparent 0%
  ) !important;
  background-size: 100% 48rpx;
  position: relative !important;
}
.sk-text-26-6667-202 {
  background-image: linear-gradient(
    transparent 26.6667%,
    #eeeeee 0%,
    #eeeeee 73.3333%,
    transparent 0%
  ) !important;
  background-size: 100% 60rpx;
  position: relative !important;
}
.sk-text-20-0000-93 {
  background-image: linear-gradient(
    transparent 20%,
    #eeeeee 0%,
    #eeeeee 80%,
    transparent 0%
  ) !important;
  background-size: 100% 40rpx;
  position: relative !important;
}
.sk-text-25-0000-5 {
  background-image: linear-gradient(
    transparent 25%,
    #eeeeee 0%,
    #eeeeee 75%,
    transparent 0%
  ) !important;
  background-size: 100% 40rpx;
  position: relative !important;
}
.sk-text-20-0000-73 {
  background-image: linear-gradient(
    transparent 20%,
    #eeeeee 0%,
    #eeeeee 80%,
    transparent 0%
  ) !important;
  background-size: 100% 40rpx;
  position: relative !important;
}
.sk-text-20-0000-533 {
  background-image: linear-gradient(
    transparent 20%,
    #eeeeee 0%,
    #eeeeee 80%,
    transparent 0%
  ) !important;
  background-size: 100% 60rpx;
  position: relative !important;
}
.sk-text-28-3333-39 {
  background-image: linear-gradient(
    transparent 28.3333%,
    #eeeeee 0%,
    #eeeeee 71.6667%,
    transparent 0%
  ) !important;
  background-size: 100% 60rpx;
  position: relative !important;
}
.sk-text-28-3333-166 {
  background-image: linear-gradient(
    transparent 28.3333%,
    #eeeeee 0%,
    #eeeeee 71.6667%,
    transparent 0%
  ) !important;
  background-size: 100% 60rpx;
  position: relative !important;
}
.sk-button {
  color: #efefef !important;
  background: #efefef !important;
  border: none !important;
  box-shadow: none !important;
}
.sk-image {
  background: #efefef !important;
}
.sk-pseudo::before,
.sk-pseudo::after {
  background: #efefef !important;
  background-image: none !important;
  color: transparent !important;
  border-color: transparent !important;
}
.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
  border-radius: 0 !important;
}
.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
  border-radius: 50% !important;
}
.sk-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}
</style>
